import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  conditionsPanel: {
    display: "flex",
    marginBottom: "16px",
  },
  conditionValuePanel: {
    padding: "16px",
    flexGrow: "1",
  },
  conditionValue: {
    flexGrow: 1,
  },
  conditionBorder: {
    border: "#D9D9D9 solid 1px",
    borderRadius: "4px",
  },
  clauseItem: {
    display: "flex",
    padding: "5px 0",
    borderRadius: "4px",
    "&:hover": {
      background: "#f0f0f0",
    },
    marginBottom: "10px",
  },
  errorTips: {
    height: "20px",
  },
  clauseKey: {
    width: "200px",
    height: "24px",
  },
  clauseOperator: {
    width: "80px",
    height: "24px",
  },
  clauseValue: {
    width: "260px",
    flexGrow: 1,
  },
  joint: {
    width: "75px",
    flexGrow: 0,
  },
  clauseIcon: {
    color: "#999",
    width: "16px",
    cursor: "pointer",
    marginRight: "16px",
  },
  clauseSpace: {
    flexGrow: 1,
    width: "10px",
    flexShrink: 0,
  },
  hide: {
    display: "none",
  },
  conditionArray: {
    borderRadius: "4px",
    border: "rgb(245, 245, 245) solid 1px",
    padding: "8px",
    margin: "8px 0",
  },
});

export default useStyles;
